<template>
  <div class="waper_page">
    <div style="height: 800px; width: 900px; border: 1px solid red; position: relative;margin: 0 auto">
      <vue-draggable-resizable @click.stop @click.prevent v-for="(item, index) in list" :key="index" :w="item.w"
        :h="item.h" :x="item.x" :active="isDelete" :parent="true" :debug="false" :min-width="200" :min-height="200"
        :isConflictCheck="true" :snap="true" :isDel="isDelete" :snapTolerance="1" @activated="selectType(item)"
        @refLineParams="getRefLineParams" :class="item.class">
        <div class="dele" @mousedown.stop.prevent="deleTata($event, index)"></div>
      </vue-draggable-resizable>
      <!--辅助线-->
      <span class="ref-line v-line" v-for="item in vLine" :key="item.id + 'a'" v-show="item.display"
        :style="{ left: item.position, top: item.origin, height: item.lineLength }"></span>
      <span class="ref-line h-line" v-for="item in hLine" :key="item.id + 'b'" v-show="item.display"
        :style="{ top: item.position, left: item.origin, width: item.lineLength }"></span>
      <!--辅助线END-->

    </div>
  </div>
</template>

<script>
import VueDraggableResizable from '@/commont/plugins/draggable/vue-draggable-resizable'
import '@/commont/plugins/draggable/vue-draggable-resizable.css'

export default {
  name: 'app',
  components: { VueDraggableResizable },
  data() {
    return {
      list: [
        { w: 200, h: 200, x: 0, class: 'test1', active: false },
        { w: 200, h: 200, x: 210, class: 'test2', active: false },
        { w: 200, h: 200, x: 420, class: 'test3', active: false },
        { w: 200, h: 200, x: 630, class: 'test4', active: false },
      ],
      isDelete: false,
      vLine: [],
      hLine: []
    }
  },
  methods: {
    // 辅助线回调事件
    getRefLineParams(params) {
      const { vLine, hLine } = params
      let id = 0
      this.vLine = vLine.map(item => {
        item['id'] = ++id
        return item
      })
      this.hLine = hLine.map(item => {
        item['id'] = ++id
        return item
      })
    },
    selectType(item) {
      console.log(item);
    },
    deleTata(e, index) {
      e.preventDefault();
      e.stopPropagation();
      this.isDelete = false;
      console.log(this.$refs.del[index]);
      this.list.splice(index, 1);
    },
  }
}
</script>

<style lang="scss" scoped>
.test1 {
  background-color: rgb(239, 154, 154);
}

.test2 {
  background-color: rgb(129, 212, 250);
}

.test3 {
  background-color: rgb(174, 213, 129);
}

.test4 {
  background-color: rgb(213, 129, 199);
}

.dele {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
  z-index: 999;
  right: 0;
}
</style>
